<template>
	<el-table ref="tableRef" :data="tableData" size="small" :class="$style['table-wrapper']"
		@selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
		<el-table-column property="name" label="地图名称" align="center" />
	</el-table>
</template>

<script setup>
import { ref, nextTick } from 'vue'
const tableData = ref([])
const assignData = ref([])
const emit = defineEmits(['changeEnd'])
const tableRef = ref(null)
const handleSelectionChange = (val) => {
	const ids = val.map((item) => item.id)
	emit('changeEnd', ids)
}
const open = (table, assign) => {
	tableData.value = table
	assignData.value = assign
	nextTick(() => {
		tableRef.value.clearSelection()
		tableData.value.forEach((item) => {
			if (assignData.value.includes(item.id)) {
				tableRef.value.toggleRowSelection(item, true)
			}
		})
	})
}
defineExpose({
	open
})
</script>

<style lang="scss" module>
.table-wrapper {
	flex: 1;
	width: 100%;
}
</style>
